<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">
                        <input id="productid" name="productid"
                               th:value="${productAdvertisement.productid}"
                               type="hidden">
                        <input id="advpositionid" name="advpositionid"
                               th:value="${productAdvertisement.advpositionid}"
                               type="hidden">
                        <input id="channelid" name="channelid"
                               th:value="${productAdvertisement.channelid}"
                               type="hidden">
                        <input type="hidden" id="selectedareas" name="edareas"
                        >
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品名称：</label>
                            <div class="col-sm-8">
                                <input id="productname" name="productname"
                                       readonly="readonly" th:value="${productAdvertisement.productname}"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告位名称：</label>
                            <div class="col-sm-8">
                                <input readonly="readonly" id="advpositionname" name="advpositionname"
                                       th:value="${productAdvertisement.advpositionname}" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">渠道名称：</label>
                            <div class="col-sm-8">
                                <input readonly="readonly" id="channelname" name="channelname"
                                       th:value="${productAdvertisement.channelname}" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-1 control-label"></label>
                            <div class="col-md-11">
                                <a href="javascript:;" class="btn btn-default" data-toggle="modal"
                                   data-target="#myModal">选择定向城市</a>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label text-right">选择的地区</label>
                            <div class="col-sm-9 col-xs-12" id="aresTable">
                                <div id="areas" class="form-control-static"></div>
                            </div>
                        </div>
                        <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                                aria-hidden="true">×
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            选择区域
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="test-div">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            关闭
                                        </button>
                                        <button type="button" class="btn btn-primary btntest1">
                                            确定
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告名称：</label>
                            <div class="col-sm-8">
                                <input maxlength="30" id="advname" name="advname" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告主名称：</label>
                            <div class="col-sm-8">
                                <input maxlength="30" id="advertisername" name="advertisername" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告事件：</label>
                            <div class="col-sm-8">
                                <input maxlength="30" id="advevent" name="advevent" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group" id="sbsbsbsb" style="display: none">
                            <label class="col-sm-3 control-label">广告标题：</label>
                            <div class="col-sm-8">
                                <input maxlength="30" id="advdes" name="advdes" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告描述：</label>
                            <div class="col-sm-8">
                                <input maxlength="30" id="advDescription" name="advDescription" class="form-control"
                                       type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">结算方式：</label>
                            <div class="col-sm-8">
                                <select id="advsettlement" name="advsettlement"
                                        class="form-control" type="text">
                                    <option value="">---请选择---</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">刊例价格：</label>
                            <div class="col-sm-8">
                                <input onkeyup="value=value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')"
                                       maxlength="8" id="advprice" name="advprice" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告排序：</label>
                            <div class="col-sm-8">
                                <input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                       onafterpaste="value=value.replace(/^(0+)|[^\d]+/g,'')" maxlength="10"
                                       maxlength="10" id="advsort" name="advsort" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告位置：</label>
                            <div class="col-sm-8">
                                <input onkeyup="this.value=this.value.replace(/\D/g,'')"
                                       onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="4"
                                       maxlength="10" id="settlementposition" name="settlementposition"
                                       class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">广告类型：</label>
                            <div class="col-sm-8">
                                <select id="advtype" name="advtype"
                                        class="form-control" onchange="getAdvtype()">
                                    <option value="">---请选择---</option>
                                    <option value="1">JS</option>
                                    <option value="2">素材链接</option>
                                    <option value="3">链接</option>
                                    <option value="4">文字链接</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="bssb111" style="display: none">
                            <label class="col-sm-3 control-label">文字内容：</label>
                            <div class="col-sm-8">
                                <input maxlength="6" id="advcontent" name="advcontent" class="form-control" type="text">
                            </div>
                        </div>
                        <div id="aaaa" style="display: none" class="form-group">
                            <label class="col-sm-3 control-label">广告url：</label>
                            <div class="col-sm-8">
                                <input maxlength="800" id="advurl" name="advurl" class="form-control" type="text">
                            </div>
                        </div>
                        <div id="bbbb" style="display: none" class="form-group">
                            <label class="col-sm-3 control-label">广告js：</label>
                            <div class="col-sm-8">
                                <input maxlength="1000" id="advjs" name="advjs" class="form-control" type="text">
                            </div>
                        </div>
                        <div id="zhenjibadoubi" style="display: none" class="form-group">
                            <label class="col-sm-3 control-label">素材宽高比：</label>
                            <div class="col-sm-8">
                                <input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                       maxlength="10" id="settlementw"
                                       name="settlementw"
                                       type="text" placeholder="宽">：
                                <input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                       maxlength="10" id="settlementh"
                                       name="settlementh"
                                       type="text" placeholder="高">
                            </div>
                        </div>
                        <div class="form-group" style="display: none" id="eeee">
                            <label class="col-sm-3 control-label">是否生成静态JS文件：</label>
                            <div class="col-sm-8">
                                <select id="isgeneratefiles" name="isgeneratefiles"
                                        class="form-control">
                                    <option value="1">是</option>
                                    <option value="0">否</option>
                                </select>
                            </div>
                        </div>
                      <!--  <div id="dddd" style="display: none" class="form-group">
                            <label class="col-sm-3 control-label">广告展现次数：</label>
                            <div class="col-sm-8">
                                <input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                                       onafterpaste="value=value.replace(/^(0+)|[^\d]+/g,'')" maxlength="4" id="advnum"
                                       name="advnum" class="form-control" type="text">
                            </div>
                        </div>-->
                        <input id="advimgurl" name="advimgurl" type="hidden">
                        <input id="fileName" name="fileName" type="hidden">
                        <div id="cccc" style="display: none" class="form-group">
                            <form enctype="multipart/form-data"
                                  method="post" id="updform">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">素材图</label>
                                    <div class="col-sm-8">
                                        <input type="file" id="file_pack" name="file"
                                               accept="image/png, image/jpeg, image/gif" style="display: inline-block;">
                                        <button type="button" class="btn btn-primary " id="upload">
                                            上传
                                        </button>
                                        <!--<div id="loading" style="display:none"><img src="/site/images/wait.gif"
                                                                                    alt=""/>正在上传,请稍候...
                                        </div>-->
                                        <p class="help-block">封面图尽量选择 <span
                                                id="span_id1"></span>*<span
                                                id="span_id2"></span>比例的像素的图片，支持图片格式jpg,png,gif
                                        </p>
                                        <img id="cover"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-8 col-sm-offset-3">
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript" src="/js/appjs/market/productAdvertisement/add.js">
</script>

<script type="text/javascript" charset="utf-8" th:src="@{/check_area/js/RegionalChoice.js}"></script>
<!--<link rel="stylesheet" href="@{/check_area/js//RegionalChoice.css}"
      th:href="@{/check_area/js//RegionalChoice.css}">-->
<link rel="stylesheet" th:href="@{/check_area/css/RegionalChoice.css}">
<script type="text/javascript" th:inline="javascript">
    function showArea(areas) {
        if (areas == "" || areas == null) {
            return;
        }
        areas = eval('(' + areas + ')');
        $("#aresTable").html("");
        //动态追加table
        var strHtml = "";
        for (var i in areas) {
            if (i == 0) {
                strHtml = strHtml
                    + "<tr>"
                    + "<td width='35%'>省</td>"
                    + "<td width='15%'>城市</td>"
                    + "</tr>";

            }
            var obj = areas[i];
            var bigarea = obj.bigarea;//省名称 或 直辖市
            var info = obj.info;//城市名称
            if (info == '') {
                strHtml = strHtml
                    + "<tr>"
                    + "<td width='35%'>" + bigarea + "</td>"
                    + "<td width='15%'>全部</td>"
                    + "</tr>";           //为空的时候全选
            } else {
                var allcity = "";
                for (var j in info) {
                    //console.log(info[j].city)  //不为空的时候全选
                    allcity = allcity + info[j].city + "|";
                }
                allcity = allcity.substring(0, allcity.lastIndexOf("|"));
                strHtml = strHtml
                    + "<tr>"
                    + "<td width='35%'>" + bigarea + "</td>"
                    + "<td width='15%'>" + allcity + "</td>"
                    + "</tr>";
            }
        }
        $("#aresTable").append(strHtml);
    }

    $(function () {
        var advpositiontype = [[${productAdvertisement.advpositiontype}]];
        if (advpositiontype == 1) {
            $("#sbsbsbsb").show();
        }
        $('#span_id1').html([[${productAdvertisement.advpositionwide}]]);
        $('#span_id2').html([[${productAdvertisement.advpositionheight}]]);
        //定向和不定向的处理
        //------生成地区
        GetRegionPlug($("#selectedareas").val());
        showArea($("#selectedareas").val());
        //------选择后确定按钮
        $(".btntest1").click(function () {
            var areas = GetChecked();//已选择的城市名
            // $("#areas").html(areas);//显示在页面
            $("#selectedareas").val(areas);//存入隐藏的input
            $('#myModal').modal('hide');//完后隐藏模态框
            $("#aresTable").html("");
            //动态追加table
            var strHtml = "";
            for (var i in areas) {
                if (i == 0) {
                    strHtml = strHtml
                        + "<tr>"
                        + "<td width='35%'>省</td>"
                        + "<td width='15%'>城市</td>"
                        + "</tr>";

                }
                var obj = eval('(' + areas[i] + ')');
                var bigarea = obj.bigarea;//省名称 或 直辖市
                var info = obj.info;//城市名称
                if (info == '') {
                    strHtml = strHtml
                        + "<tr>"
                        + "<td width='35%'>" + bigarea + "</td>"
                        + "<td width='15%'>全部</td>"
                        + "</tr>";           //为空的时候全选
                } else {
                    var allcity = "";
                    for (var j in info) {
                        //console.log(info[j].city)  //不为空的时候全选
                        allcity = allcity + info[j].city + "|";
                    }
                    allcity = allcity.substring(0, allcity.lastIndexOf("|"));
                    strHtml = strHtml
                        + "<tr>"
                        + "<td width='35%'>" + bigarea + "</td>"
                        + "<td width='15%'>" + allcity + "</td>"
                        + "</tr>";
                }
            }
            $("#aresTable").append(strHtml);
        })


        /* $("#loading").hide();*/
        $("#upload").click(function () {
            var oFile = $("#file_pack").val();
            if (oFile == null || "" == oFile) {
                alert("没有文件！请选择或退出");
                return;
            }
            var file = document.querySelector('[type=file]');
            // 通过FormData将文件转成二进制数据
            var formData = new FormData();
            // 将文件转二进制
            formData.append('file', file.files[0]);
            $.ajax({
                type: "POST",
                url: "/market/productAdvertisement/uploadFile",
                data: formData,// 你的formid
                async: false,
                processData: false,
                contentType: false,
                error: function (request) {
                    parent.layer.alert("Connection error");
                },
                success: function (result) {
                    if (result != null) {
                        /*$("#loading").hide();*/
                        var name = result.split("#")[0];
                        var fileSuffix = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
                        if (fileSuffix !== "png" && fileSuffix !== "jpg" && fileSuffix !== "gif") {
                            layer.alert("上传图片格式不正确，请重新上传")
                            return;
                        }
                        var url = result.split("#")[1];
                        var realurl = result.split("#")[2];
                        $("#advimgurl").val(url);
                        $("#fileName").val(name);
                        $("#cover").attr("src", realurl);
                        $("#cover").attr("width", 200);
                        $("#cover").attr("height", 200);
                        layer.msg("上传成功");
                        $("#file").val('');
                    } else {
                        layer.msg("上传失败，请联系管理员！");
                    }
                }
            });
        });

        $.ajax({
            type: 'get',
            url: '/market/productAdvertisement/getSettlingAccounts',
            dataType: 'json',
            success: function (datas) {
                //返回list数据并循环获取
                var select = $("#advsettlement");
                for (var i = 0; i < datas.length; i++) {
                    select.append("<option value='" + datas[i] + "'>"
                        + datas[i] + "</option>");
                }
            }
        });

    })

    function getAdvtype() {
        var advtype = $("#advtype").val();
        $("#advjs").val("");
        $("#advimgurl").val("");
        $("#advurl").val("");
        $("#advcontent").val("");
        $("#settlementw").val("");
        $("#settlementh").val("");
        $('#cover').hide();
        if (advtype == 1) {
            $("#bbbb").show();
            $("#zhenjibadoubi").show();
           /* $("#dddd").show();*/
            $("#eeee").show();
            $("#aaaa").hide();
            $("#bssb111").hide();
            $("#cccc").hide();
        } else if (advtype == 2) {
            $("#aaaa").show();
            $("#bssb111").hide();
            $("#cccc").show();
            $("#bbbb").hide();
            $("#zhenjibadoubi").hide();
          /*  $("#dddd").hide();*/
            $("#eeee").hide();
        } else if (advtype == 3) {
            $("#aaaa").show();
            $("#cccc").hide();
            $("#bssb111").hide();
            $("#bbbb").hide();
            $("#zhenjibadoubi").hide();
           /* $("#dddd").hide();*/
            $("#eeee").hide();
        } else if (advtype == 4) {
            $("#aaaa").show();
            $("#bssb111").show();
            $("#cccc").hide();
            $("#bbbb").hide();
            $("#zhenjibadoubi").hide();
         /*   $("#dddd").hide();*/
            $("#eeee").hide();
        } else {
            $("#aaaa").hide();
            $("#cccc").hide();
            $("#bbbb").hide();
            $("#bssb111").hide();
         /*   $("#dddd").hide();*/
            $("#eeee").hide();
            $("#zhenjibadoubi").hide();
        }
    }

</script>
</body>
</html>
